<template>

    <el-row style="margin: 20px 0 0 0;" :gutter="20">
        <el-col :span="12" :xs="24">
            <el-card style="margin-top: 10px;">
                <div slot="header">本月订单笔数</div>
                <div ref="c1" class="chart"></div>
            </el-card>
        </el-col>

        <el-col :span="12" :xs="24">
            <el-card style="margin-top: 10px;">
                <div slot="header">本月交易流水</div>
                <div ref="c2" class="chart"></div>
            </el-card>
        </el-col>

    </el-row>



</template>

<script>
import * as echarts from 'echarts'
import request from '@/utils/request'
export default {
    data() {
        return {
            activeName: 'count',
            charts: [null, null],
            urls: [
                'admin-home/price-chart',
                'admin-home/order-count-chart',
            ]
        }
    },
    mounted() {
        this.initChart()
        this.loadChartData(0)
        this.loadChartData(1)
    },
    methods: {
        initChart() {
            this.charts[0] = echarts.init(this.$refs.c1)
            this.charts[1] = echarts.init(this.$refs.c2)
        },
        async loadChartData(index) {

            const res = await request.get(this.urls[index])

            let keyName = index == 0 ? 'price' : 'count'

            let data1 = res.map(x => x['time'])

            let data2 = res.map(x => x[keyName])

            this.setOption(data1, data2, index)
        },

        setOption(data1, data2, index) {

            let chart = this.charts[index]

            chart.setOption({

                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                },
                grid: {
                    left: 40,
                    right: 1,
                    top: 10,
                    bottom: 20
                },
                xAxis: {
                    data: data1,
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: '#eee',
                            type: 'dashed'
                        }
                    },
                },
                series: [
                    {
                        data: data2,
                        type: 'line',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        lineStyle: {
                            color: '#ccc',
                            width: 3
                        },
                        smooth: true, // 可选，是否平滑曲线
                        symbolSize:0,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 216, 135, 0.4)' // 渐变颜色，可以设置多个不同的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(0, 216, 135, 0)' // 渐变颜色
                            }])
                        }
                    }
                ]
            })
        },

        // 标签切换
        handleClick(tab, event) {
            this.loadChartData(tab.index)
        }
    }
}
</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 400px;
}
</style>